<template>
  <div class="layout">
    <el-container v-if="state.showMenu" class="container">
      <el-aside class="aside">
        <div class="head">
          <div>
            <img class="logo" src="../assets/logo.png" />
            <span>PMall积分商城</span>
          </div>
        </div>
        <div class="line" />
        <el-menu
          background-color="#304156"
          text-color="rgb(191, 203, 217)"
          :router="true"
          :default-active="state.currentPath"
          unique-opened>
          <el-sub-menu v-for="(item, index) in state.activeRoutes" :key="index" :index="index.toString()">
            <template #title>
              <span>{{ item.label }}</span>
            </template>
            <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
              <i v-if="child.iconCls" :class="`sub-menu ${child.iconCls}`" /> {{ child.label }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container class="content">
        <Header />
        <div class="main">
          <router-view />
        </div>
        <Footer />
      </el-container>
    </el-container>
    <el-container v-else class="container">
      <router-view />
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { localGet, pathMap } from '@/utils'

const router = useRouter()
const state = reactive({
  activeRoutes: [],
  showMenu: true,
  currentPath: '/'
})

// 初始化执行方法
onMounted(() => {
  const vRoutes = []
  const userInfo = localGet('user')
  const permission = userInfo.permission
  Object.assign(vRoutes, router.options.routes)
  for (let iRoutes = 0; iRoutes < vRoutes.length; iRoutes++) {
    const route = vRoutes[iRoutes]
    if (!route.hidden && route.children) {
      const nodeChildrens = []
      for (let iChildrens = 0; iChildrens < route.children.length; iChildrens++) {
        const children = route.children[iChildrens]
        // 权限列表中存在才显示
        if (!children.hidden && permission.indexOf(children.path) > -1) {
          nodeChildrens.push(children)
        }
      }
      // 如果存在至少一个Children才显示
      if (nodeChildrens.length > 0) {
        const node = {}
        node.label = vRoutes[iRoutes].label
        node.iconCls = vRoutes[iRoutes].iconCls
        node.children = nodeChildrens
        state.activeRoutes.push(node)
      }
    }
  }
  state.currentPath = router.currentRoute.value.fullPath
})
</script>

<style scoped>
.aside {
  width: 200px !important;
  background-color: #304156;
}
.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.head > div {
  display: flex;
  align-items: center;
}

.head img {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
.head span {
  font-size: 20px;
  color: rgb(191, 203, 217);
}
.line {
  border-top: 1px solid hsla(0, 0%, 100%, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.content {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}
.main {
  height: calc(100vh - 100px);
  overflow: auto;
  padding: 10px;
}
i.sub-menu {
  margin-right: 10px;
}
</style>
